<template>
    <el-row :gutter="5">
        <el-col :span="20"> <el-input v-model="value"></el-input></el-col>
        <el-col :span="4">  <el-button @click="open" :icon="Search"></el-button></el-col>
    </el-row>
    <el-dialog v-model="dialogVisible" width="60%">
        <el-scrollbar height="600">
            <div style="display: flex;margin-bottom: 10px;">
                <el-checkbox @change="changeFuzzyQuery">模糊</el-checkbox>
                <el-button type="primary" @click="formSubmit" style="margin-left: 10px;">查 询</el-button>
            </div>
            <sc-form ref="formRef" :config="formConfig" v-model="formData" :modelValue="formData"
                style="margin-bottom: 5px;"></sc-form>
            <el-table ref="table" :data="tableData" height="500" :lazy="lazy" :load="load" highlight-current-row @row-click="click" row-key="id"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-dblclick="dblclick">
                <el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
                <template v-for="(item, index) in tableConfig" :key="index">
                    <el-table-column :prop="item.prop" :label="item.label" />
                </template>
                <slot></slot>
            </el-table>
        </el-scrollbar>
            <div>
                <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
            </div>
       
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, watch,defineModel } from 'vue'
import config from "@/config/tableSelect";
import Api from '@/api/model/system'
import { Search } from '@element-plus/icons-vue';
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: { type: String, default: '' },
    item: { type: Object, default: () => { } }
})
const value =defineModel()
const tableData = ref([])
const tableConfig = ref({})
const total = ref(0)
const formConfig = ref({})
const formData = ref({})
const fuzzyQuery = ref(true)
const lazy = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const dialogVisible = ref(false)
onMounted(() => {
    getData()
    getInit()
})
const open = () => {
    dialogVisible.value = true
}
const changeFuzzyQuery = (val) => {
    fuzzyQuery.value = val;
}
const formSubmit = () =>{
    getData()
}
const getData = async () => {
    var reqData = {
        fileName: props.item.fileName,
        pageSize: pageSize.value,
        pageNo: currentPage.value, //1
        fieldMap: formData.value,
        fuzzyQuery: fuzzyQuery.value
    }
    Object.assign(reqData)
    var res = await Api.select.query.post(reqData);
    var parseData = config.parseData(res)
    tableData.value = parseData.data;
    tableConfig.value = parseData.config;
    total.value = parseData.rows
}
const getInit = async () => {
    let params = {
        fileName: props.item.fileName
    }
    let res = await Api.report.selectCompanyList.post(params);
    if (res.code == 200) {
        formConfig.value = res.bean.form;
        lazy.value = res.bean.table.lazy
    }
}
const load = async (row, treeNode, resolve) => {
    var params = {
        parentId: row.id,
        fileName: props.item.fileName,
    }
    var res = await Api.select.query.post(params);
    resolve(res.reportData)
}
const reload = () => {
    getData()
}
const click = (row) => {
    value.value = row[props.item.template]
}
const dblclick = () => {
    dialogVisible.value = false
}
</script>
